<template>
    <div class="login">
        <div>
            <el-form :model="data.form" ref="formRef" :rules="data.rules" label-width="80px" class="login-form" >
                <div class="login-title">
                    <img src="@/assets/picture/养老金.png" alt="logo" class="login-logo">
                    欢迎登录唐山市养老保险网站
                </div>
                <el-form-item label="企业编号" prop="username">
                    <el-input v-model="data.form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="data.form.password" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-radio-group v-model="data.form.role" style="margin-left: 80px; display: flex;">
                        <el-radio value="企业">企业</el-radio>
                        <el-radio value="管理员">管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="login-button">
                    <el-button type="primary" @click="login">登录</el-button>

                </div>
                <div class="register-button">
                    还没有账号？ 请<a href="/register">注册</a>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import router from '@/router';
import request from '@/utils/request';
import { reactive, ref } from 'vue';
const data = reactive({
    form: {
        username: '',
        password: '',
        role: '企业'
    },
    rules: {
        username: [
            { pattern: /^[A-Za-z0-9]{6,10}$/, message: '请输入有效的账号', trigger: ['change', 'blur'] }
        ],
        password: [
            { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d.@]{6,20}$/, message: '密码必须为6-20位，包含大小写字母和数字，可以包含.和@', trigger: ['change', 'blur'] }
        ],
    }
})

const formRef = ref()

const login = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            if (data.form.role == '企业') {
                // 发送登录请求
                request.post('/enterprise/login', data.form).then(res => {
                    if (res.code == 200) {
                        // 登录成功，跳转到首页
                        ElMessage.success('登录成功')
                        //存储后台返回的企业用户
                        localStorage.setItem('token', res.data.token)
                        localStorage.setItem('enterprise', JSON.stringify(res.data.user))
                        router.push('/home/homepage')
                    } else {
                        // 登录失败，提示错误信息
                        ElMessage.error(res.message)
                    }
                })
            } else if (data.form.role == '管理员') {
                // 发送登录请求
                request.post('/admin/login', data.form).then(res => {
                    if (res.code == 200) {
                        // 登录成功，跳转到首页
                        ElMessage.success('登录成功')
                        //存储后台返回的管理员用户
                        localStorage.setItem('token', res.data.token)
                        localStorage.setItem('admin', JSON.stringify(res.data.user))
                        router.push('/admin/backstagehome')

                    } else {
                        // 登录失败，提示错误信息
                        ElMessage.error(res.message)
                    }
                })
            }

        } else {
            return false
        }
    })
}
</script>
<style scoped>

</style>